<template>
	<div class="land">
		<div class="padding">
			<span class="back" @click="goBack">
				<img src="../../../static/img/arrow_left@3x.png" alt="">
			</span>
			<h1 class="title">个人资料</h1>
		</div>	
		<div class="img">
			<a>
				<span>头像设置</span>
				<div class="portial">
					<input type="file" class="imgFile" @change="userHeader">
					<div>
						<img id="portrait" src="" alt="">
					</div>
				</div>
			</a>
		</div>
		<div class="hng"></div>
		<div class="message">
			<p>个人简介：</p>
			<textarea placeholder="请不要超过15字..."></textarea>
		</div>
		<div class="xg" @click="surModify">确认修改</div>
	</div>
</template>
<script>
import axios from 'axios'
import {mapMutations, mapGetters} from 'vuex'
import {personInfo,editPic} from 'api/api'
/* eslint-disable */
export default{
	mounted () {
    this.init()
  },
  methods: {
    data () {
      return {
      }
    },
    computed: {
      ...mapGetters([
        'userImg'
      ])
    },
    goBack () {
      this.$router.go(-1)
		},
		init () {
      if (localStorage.getItem('token') === null){
        this.$router.push('/login')
			}
			axios.get(editPic +localStorage.getItem('userId')+'/id')
			.then((res) => {
        if (res.data.code === 200) {
					console.log(res.data.message)
					console.log('读取头像')
        }
      })
    },
    surModify () {
      axios.post(editPic +localStorage.getItem('userId')+'/verify', {
        // 'param': {
        //   'field': {
        //     'id': '15071496803',
        //     'avatar': this.userImg,
        //     'name': '张三',
        //     'selfIntroduction': '个人简介.........写些东西,介绍自己'
        //   }
				// }
				'param': {
					'field': {
            'idCard': '',
            'avatar': this.userImg,
						'name': '张三',
					}
        }
      }).then((res) => {
        if (res.data.code === 200) {
					console.log(res.data.message)
					console.log('设置头像成功')
        }
      })
    },
    userHeader (source) {
      let file = source.target.files[0]
      console.log(source)
      if (window.FileReader) {
        let vm = this
        var fr = new FileReader()
        fr.onloadend = function (e) {
          document.getElementById('portrait').src = e.target.result
          // console.log(e.target.result)
          var imgBase64Data = e.target.result
          var pos = imgBase64Data.indexOf('4') + 2
          imgBase64Data = imgBase64Data.substring(pos, imgBase64Data.length - pos)
          // console.log(imgBase64Data)
          // console.log(img64)
          var img64 = 'base64://' + imgBase64Data
          console.log(img64)
          vm.setUserImg(img64)
        }
        fr.readAsDataURL(file)
      }
    },
    ...mapMutations({
      setUserImg: 'SET_USERIMG'
    })
  }
}
</script>
<style lang="stylus" scoped>
	*{
		text-align: left;
		box-sizing: border-box;
	}
	.padding{
		background:#fff;
		padding:0 1rem;
		border-bottom:8px solid #f6f6f6;
	}
	.title {
		font-family: PingFang-SC-Medium; 
		font-size:1.2rem; 
		font-weight: normal; 
		font-stretch: normal; 
		line-height: 4rem; 
		letter-spacing: 0rem; 
		color: #333333; 
		text-align: center;
	}
	.land span.back{
		float left
		width 0.6rem
		height 1rem
		background-size 0.5rem 1rem;
		margin-top 1.5rem
	}
	.land span.back img{
		width 100%
		height 100%
	}
	.img{
		height:5.09rem;
		background:#fff;
		border-bottom:1px solid rgba(102,102,102,0.2);
	}
	.img .portial .imgFile{
		width 64px
		height 64px
		position absolute
		opacity 0
	}
	.img a{
		overflow: hidden;
		height:5.09rem;
	}
	.img a span{
		float: left;
		line-height:5.09rem;
		color:rgb(51,51,51);
		text-indent:1.8rem;
	}
	.img a .portial{
		float: right;
		margin-right:1.8rem;
		padding:0.45rem 0 0.6rem; 
		overflow: hidden;
	}
	.portial div{
		width:4rem;
		height:4rem;
		float: left;
	}
	.portial img{
		width 100%
		height 100%
	}
	.portial span{
		float: right;
		width:0.8rem;
		height:1.45rem;
		background-size:100% 100%;
		margin-left:1rem;
		margin-top:1rem;
	}
	.hng{
		height:1.36rem;
		background:#f4f4f4;
	}
	.message{
		background:#fff;
		border-top:1px solid rgba(102,102,102,0.2);
		padding:0 0.8rem;
	}
	.message p{
		margin-top:0.5rem;
		color:rgb(51,51,51);
		line-height:2rem;
	}
	.message textarea{
		height:8rem;
		width:100%;
		resize:none;
		margin-top: 0.5rem;
		outline none;
		margin-top: 10px
		margin-left 2px
	}
	.xg{
		width:90%;
		background:rgb(51,51,51);
		border-radius:5px;
		height:3rem;
		color:rgb(255,255,255);
		line-height:3rem;
		text-align: center;
		margin:5rem auto 0;
	}
</style>